popupMenu: Use a unicode character for the ornament

This makes it easy to replace the dot with another label in the future.
Change the allocation logic, as text layout is more complicated than
simple icon logic.

https://bugzilla.gnome.org/show_bug.cgi?id=698427

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c4d49ed42eacaa66b3eac28c67fff96bb892690c..e908592716d3e48712c19931ab59cf76f36082d4 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -125,6 +125,10 @@ StScrollBar StButton#vhandle:active {
 
 /* PopupMenu */
 
+.popup-menu-ornament {
+    text-align: center;
+}
+
 .popup-menu-boxpointer,
 .candidate-popup-boxpointer {
     -arrow-border-radius: 8px;

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index e3adfcabbb5a0bc778a56805843a602fe6d0c1d4..8f600a439d2755097d0addf126b3f8f81d730faf 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -59,7 +59,8 @@ const PopupBaseMenuItem = new Lang.Class({
 
         this._children = [];
         this._ornament = Ornament.NONE;
-        this._dot = null;
+        this._ornamentLabel = new St.Label({ style_class: 'popup-menu-ornament' });
+        this.actor.add_actor(this._ornamentLabel);
         this._columnWidths = null;
         this._spacing = 0;
         this.active = false;
@@ -189,32 +190,14 @@ const PopupBaseMenuItem = new Lang.Class({
         this._ornament = ornament;
 
         if (ornament == Ornament.DOT) {
-            this._dot = new St.DrawingArea({ style_class: 'popup-menu-item-dot' });
-            this._dot.connect('repaint', Lang.bind(this, this._onRepaintDot));
-            this.actor.add_actor(this._dot);
-            this.actor.add_accessible_state (Atk.StateType.CHECKED);
-        } else  if (ornament == Ornament.NONE) {
-            this._dot.destroy();
-            this._dot = null;
-            this.actor.remove_accessible_state (Atk.StateType.CHECKED);
+            this._ornamentLabel.text = '\u2022';
+            this.actor.add_accessible_state(Atk.StateType.CHECKED);
+        } else if (ornament == Ornament.NONE) {
+            this._ornamentLabel.text = '';
+            this.actor.remove_accessible_state(Atk.StateType.CHECKED);
         }
     },
 
-    _onRepaintDot: function(area) {
-        let cr = area.get_context();
-        let [width, height] = area.get_surface_size();
-        let color = area.get_theme_node().get_foreground_color();
-
-        cr.setSourceRGBA (
-            color.red / 255,
-            color.green / 255,
-            color.blue / 255,
-            color.alpha / 255);
-        cr.arc(width / 2, height / 2, width / 3, 0, 2 * Math.PI);
-        cr.fill();
-        cr.$dispose();
-    },
-
     // This returns column widths in logical order (i.e. from the dot
     // to the image), not in visual order (left to right)
     getColumnWidths: function() {
@@ -285,26 +268,25 @@ const PopupBaseMenuItem = new Lang.Class({
         let height = box.y2 - box.y1;
         let direction = this.actor.get_text_direction();
 
-        if (this._dot) {
-            // The dot is placed outside box
-            // one quarter of padding from the border of the container
-            // (so 3/4 from the inner border)
-            // (padding is box.x1)
-            let dotBox = new Clutter.ActorBox();
-            let dotWidth = Math.round(box.x1 / 2);
-
-            if (direction == Clutter.TextDirection.LTR) {
-                dotBox.x1 = Math.round(box.x1 / 4);
-                dotBox.x2 = dotBox.x1 + dotWidth;
-            } else {
-                dotBox.x2 = box.x2 + 3 * Math.round(box.x1 / 4);
-                dotBox.x1 = dotBox.x2 - dotWidth;
-            }
-            dotBox.y1 = Math.round(box.y1 + (height - dotWidth) / 2);
-            dotBox.y2 = dotBox.y1 + dotWidth;
-            this._dot.allocate(dotBox, flags);
+        // The ornament is placed outside box
+        // one quarter of padding from the border of the container
+        // (so 3/4 from the inner border)
+        // (padding is box.x1)
+        let ornamentBox = new Clutter.ActorBox();
+        let ornamentWidth = box.x1;
+
+        ornamentBox.x1 = 0;
+        ornamentBox.x2 = ornamentWidth;
+        ornamentBox.y1 = box.y1;
+        ornamentBox.y2 = box.y2;
+
+        if (direction == Clutter.TextDirection.RTL) {
+            ornamentBox.x1 += box.x2;
+            ornamentBox.x2 += box.x2;
         }
 
+        this._ornamentLabel.allocate(ornamentBox, flags);
+
         let x;
         if (direction == Clutter.TextDirection.LTR)
             x = box.x1;